<%--
  Created by IntelliJ IDEA.
  User: zhangteng
  Date: 2018/1/2
  Time: 10:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆</title>

    <style>
        * {
            margin: 0;
        }
        #firstDiv {
            width: 100%;
            height: 100%;
            background-color: antiquewhite;
            clear: left;
        }

        #secondDiv {
            width: 450px;
            height: 250px;
            margin: 0 auto;
            background-color: coral;
            top: 50%;
            transform: translateY(-50%);
            position: relative;
        }

        input {
            width: 200px;
        }

        #verifyInput {
            width: 100px;
        }

        #usernameDiv {
            float: left;
            margin-top: 80px;
            margin-left: 80px;
        }

        #passwordDiv {
            float: left;
            margin-top: 20px;
            margin-left: 80px;
        }

        #verifyDiv {
            float: left;
            margin-top: 20px;
            margin-left: 80px;
        }

        #verifyCode {
            letter-spacing: 5px;
            font-weight: bold;
            font-style: italic;
            cursor: pointer;
        }

        #loginDiv {
            float: left;
            margin-top: 50px;
        }

        .test1 {
            height: 100px;
            background-color: aqua;
        }

        .test1 img {
            float: right;
            width: 50%;
            height: 100px;
        }

        .test1 p {
            width: 50%;
            display: inline-block;
            word-wrap: break-word;
        }

        .test2 {
            height: 100px;
            background-color: springgreen;
            width: 200px;
            float: left;
        }

        .test2 p {
            color: white;
            width: 200px;
            word-wrap: break-word;
        }
    </style>
    <script>

        function getCode() {
            var originCode = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            var code = "";
            for (var i = 0; i < 4; i++) {
                code += originCode[Math.floor(Math.random() * 35)];
            }
            document.getElementById("verifyCode").innerText = code;
        }
        function login() {
            var inputCode = document.getElementById("verifyInput").value;
            var code = document.getElementById("verifyCode").innerHTML;
            if (inputCode.toLowerCase() == code.toLowerCase()) {
                alert("好的");
            } else {
                alert("不好");
            }
        }
    </script>

</head>
<body>
<div class="test1">
    <p>
        qwedsadadadadasdasdasdaadsadqwewqeqdasdsadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaad</p>
    <img src="/img/pic1.jpg">
</div>
<div class="test2"><p>ewq111111111111111111111111111</p></div>
<div id="firstDiv">
    <div id="secondDiv">
        <div id="usernameDiv">
            <span>账号：</span>
            <input id="usernameInput" type="text">
        </div>
        <div id="passwordDiv">
            <span>密码：</span>
            <input id="passwordInput" type="password">
        </div>
        <div id="verifyDiv">
            <span>验证码：</span>
            <span id="verifyCode" onclick="getCode()">点击获取验证码</span>
            <input id="verifyInput" type="text">
        </div>
        <div id="loginDiv">
            <button onclick="login()">登陆</button>
        </div>
    </div>
</div>


</body>
</html>
